<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { loadStripe } from '@stripe/stripe-js'

const publishableKey = 'pk_test_51RbGEs2eToEGhGh0UeZd4uAJe6xEo49h878xxkE9hb8NFZCsDGG0dPUogrTfXeYnU4zl6EC3Fi3pgSoZpcJrsxi400MYaCGSyA';
const API_URL = 'https://your-backend.com/create-checkout-session';

const handlePayment = async () => {
    // 1. 获取 Stripe 实例
    const stripe = await loadStripe(publishableKey);

    // 2. 调用后端创建 Checkout 会话
    const response = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount: 5000 }) // 金额（单位：分）
    });

    const { sessionId } = await response.json();

    // 3. 重定向到 Stripe 支付页
    const { error } = await stripe.redirectToCheckout({ sessionId });
    if (error) alert(error.message);
};
</script>

<template>
    <div>
        <button @click="handlePayment">支付 $50</button>
    </div>
</template>
